<!--
*- coding = utf-8 -*-
#@Time : 2022/10/13 15:55
#@Author : CSDN 沉默小管
#@File : useClass.ts
#@web  : golangblog.blog.csdn.net
#@Software: WebStorm
-->
<template>
  <svg :style="getStyle" v-bind="attrs" class="svg-style u-f u-f-ac u-f-ajc" aria-hidden="true">
    <use :href="svgHref" />
  </svg>
</template>

<script setup lang="ts">
import {CSSProperties, useAttrs} from "vue";
import {computed} from "vue";

let attrs = useAttrs();
interface propsInterface{
  iconClass?:string,
  iconStyle?:object,
  className?:string,
  size?:string,
}
let props = withDefaults(defineProps<propsInterface>(),{
  iconClass:"",
  className:"",
  size:"12",
})

const svgHref = computed(()=>{
  return `#icon-${props.iconClass}`
})
const getStyle = computed((): CSSProperties => {
      const { size } = props;
      let s = `${size}`;
      s = `${s.replace('px', '')}px`;
  return {
        width: s,
        height: s,
        fill: 'currentColor',
        ...props.iconStyle
      };
    }
);
</script>

<style scoped lang="less">
.svg-style:focus{
  outline: none;
}
/* flex布局 */
.u-f,
.u-f-ac {
  flex-shrink:0;//给flex布局添加固定宽度
  display: flex!important;
}
.u-f-ac,
.u-f-ajc {
  align-items: center;
}
/* 水平方向居中 */
.u-f-ajc {
  justify-content: center;
}
.u-f-ajs {
  justify-content: space-between;
}
.u-f-aja {
  justify-content: space-around;

}
.u-f-spa{
  flex-direction: row;
  flex-wrap: wrap;
}
</style>
